<template>
  <div>
    <StatisticBlock></StatisticBlock>
    <el-row :gutter="15">
      <el-col class="mb15" :xs="24" :sm="24" :md="11" :lg="9">
        <PieChart
          title="分类销售统计"
          subtitle="每种商品分类的近30天销售数据"
          :data="state.category.data"
          :theme="theme"
          :bgColor="bgColor"
        />
      </el-col>
      <el-col class="mb15" :xs="24" :sm="24" :md="13" :lg="15">
        <LineChart
          title="近30天销售趋势"
          :xAxisData="state.last30Days.xAxisData"
          :data="state.last30Days.data"
          :theme="theme"
          :bgColor="bgColor"
        ></LineChart>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="13" :lg="15" class="mb15">
        <BarChart
          title="会员消费top10"
          :xAxis="state.memberTop10.xAxisData"
          :data="state.memberTop10.data"
          :theme="theme"
          :bgColor="bgColor"
        ></BarChart>
      </el-col>
      <el-col :xs="24" :sm="24" :md="11" :lg="9" class="mb15">
        <GaugeChart
          title="气温仪表盘 °C"
          :theme="theme"
          :bgColor="bgColor"
          :data="38"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup name="Home">
import PieChart from "@/components/echarts/pieChart.vue";
import LineChart from "@/components/echarts/lineChart.vue";
import BarChart from "@/components/echarts/barChart.vue";
import GaugeChart from "@/components/echarts/gaugeChart.vue";
import { categoryData, LineChartData, memerTop10 } from "@/api/Home";
import { useLayoutConfigStore } from "@/stores/layoutConfig";
import { computed, watch } from "vue";
import { ref, onMounted, defineAsyncComponent, reactive } from "vue";
const StatisticBlock = defineAsyncComponent(
  () => import("./components/statisticBlock.vue")
);
const layoutConfig = useLayoutConfigStore();
// 图表主题：'dark'暗黑
const theme = computed(() => (layoutConfig.isDrak ? "dark" : ""));
// 图表背景色
const bgColor = computed(() => (layoutConfig.isDrak ? "transparent" : ""));

onMounted(() => {
  getCategoryData();
  getLineChartData();
  getMemerTop10();
});
const state = reactive({
  category: {
    data: [],
  },
  last30Days: {
    xAxisData: [],
    data: [] as any,
  },
  memberTop10: {
    data: [] as number[],
    xAxisData: [] as string[],
  },
});
// 饼状图
const getCategoryData = async () => {
  const res = await categoryData();
  if (res.code === 200) {
    state.category.data = res.data;
  }
};
const getLineChartData = async () => {
  const { data } = await LineChartData();
  const {
    last30Days,
    orderNumList,
    rechargeMoneyList,
    returnMoneyList,
    saleMoneyList,
  } = data;
  // x轴数据
  state.last30Days.xAxisData = last30Days;
  // 每种类型的近30天的 y 轴数据
  state.last30Days.data = [
    { typeName: "订单数", list: orderNumList },
    { typeName: "销售额", list: saleMoneyList },
    { typeName: "退款额", list: returnMoneyList },
    { typeName: "充值额", list: rechargeMoneyList },
  ];
};
const getMemerTop10 = async () => {
  const res = await memerTop10();
  if (res.code === 200) {
    const data = res.data;

    data.forEach((item: any) => {

      state.memberTop10.data.push(item.consumeMoney);
      state.memberTop10.xAxisData.push(item.name);
    });
  }
};
</script>
<style lang="scss" scoped></style>
